<!DOCTYPE html>
<html>

<head>

    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">

    <title>菜单列表</title>

    <include file="Base:header_js" />
    <link href="__ADMIN_CSS__/plugins/awesome-bootstrap-checkbox/awesome-bootstrap-checkbox.css" rel="stylesheet">
    <style type="text/css">
        body{
            font-family: "微软雅黑",Helvetica,Tahoma,Arial,sans-serif;
        }
        .child_row{
            margin-left: 25px;
            margin-top: 15px;
            margin-bottom: -16px;
        }
.checkbox label {
  display: inline-block;
  vertical-align: middle;
  position: relative;
  padding-left: 5px;
}
.checkbox label::before {
  content: "";
  display: inline-block;
  position: absolute;
  width: 17px;
  height: 17px;
  left: 0;
  margin-left: -20px;
  border: 1px solid #cccccc;
  border-radius: 3px;
  background-color: #fff;
  -webkit-transition: border 0.15s ease-in-out, color 0.15s ease-in-out;
  -o-transition: border 0.15s ease-in-out, color 0.15s ease-in-out;
  transition: border 0.15s ease-in-out, color 0.15s ease-in-out;
}
.checkbox label::after {
  display: inline-block;
  position: absolute;
  width: 16px;
  height: 16px;
  left: 0;
  top: 0;
  margin-left: -20px;
  padding-left: 3px;
  padding-top: 1px;
  font-size: 11px;
  color: #555555;
}
.checkbox input[type="checkbox"],
.checkbox input[type="radio"] {
  opacity: 0;
  z-index: 1;
}
.checkbox input[type="checkbox"]:hover {
    cursor:pointer;
}
.checkbox input[type="checkbox"]:focus + label::before,
.checkbox input[type="radio"]:focus + label::before {
  outline: thin dotted;
  outline: 5px auto -webkit-focus-ring-color;
  outline-offset: -2px;
}
.checkbox input[type="checkbox"]:checked + label::after,
.checkbox input[type="radio"]:checked + label::after {
  font-family: "FontAwesome";
  content: "\f00c";
}
.checkbox input[type="checkbox"]:disabled + label,
.checkbox input[type="radio"]:disabled + label {
  opacity: 0.65;
}
.checkbox input[type="checkbox"]:disabled + label::before,
.checkbox input[type="radio"]:disabled + label::before {
  background-color: #eeeeee;

}
.checkbox.checkbox-circle label::before {
  border-radius: 50%;
}
.checkbox.checkbox-inline {
  margin-top: 0;
}

.checkbox-primary input[type="checkbox"]:checked + label::before,
.checkbox-primary input[type="radio"]:checked + label::before {
  background-color: #337ab7;
  border-color: #337ab7;
}
.checkbox-primary input[type="checkbox"]:checked + label::after,
.checkbox-primary input[type="radio"]:checked + label::after {
  color: #fff;
}

.checkbox-danger input[type="checkbox"]:checked + label::before,
.checkbox-danger input[type="radio"]:checked + label::before {
  background-color: #d9534f;
  border-color: #d9534f;
}
.checkbox-danger input[type="checkbox"]:checked + label::after,
.checkbox-danger input[type="radio"]:checked + label::after {
  color: #fff;
}

.checkbox-info input[type="checkbox"]:checked + label::before,
.checkbox-info input[type="radio"]:checked + label::before {
  background-color: #5bc0de;
  border-color: #5bc0de;
}
.checkbox-info input[type="checkbox"]:checked + label::after,
.checkbox-info input[type="radio"]:checked + label::after {
  color: #fff;
}

.checkbox-warning input[type="checkbox"]:checked + label::before,
.checkbox-warning input[type="radio"]:checked + label::before {
  background-color: #f0ad4e;
  border-color: #f0ad4e;
}
.checkbox-warning input[type="checkbox"]:checked + label::after,
.checkbox-warning input[type="radio"]:checked + label::after {
  color: #fff;
}

.checkbox-success input[type="checkbox"]:checked + label::before,
.checkbox-success input[type="radio"]:checked + label::before {
  background-color: #5cb85c;
  border-color: #5cb85c;
}
.checkbox-success input[type="checkbox"]:checked + label::after,
.checkbox-success input[type="radio"]:checked + label::after {
  color: #fff;
}

.radio {
  padding-left: 20px;
}
.radio label {
  display: inline-block;
  vertical-align: middle;
  position: relative;
  padding-left: 5px;
}
.radio label::before {
  content: "";
  display: inline-block;
  position: absolute;
  width: 17px;
  height: 17px;
  left: 0;
  margin-left: -20px;
  border: 1px solid #cccccc;
  border-radius: 50%;
  background-color: #fff;
  -webkit-transition: border 0.15s ease-in-out;
  -o-transition: border 0.15s ease-in-out;
  transition: border 0.15s ease-in-out;
}
.radio label::after {
  display: inline-block;
  position: absolute;
  content: " ";
  width: 11px;
  height: 11px;
  left: 3px;
  top: 3px;
  margin-left: -20px;
  border-radius: 50%;
  background-color: #555555;
  -webkit-transform: scale(0, 0);
  -ms-transform: scale(0, 0);
  -o-transform: scale(0, 0);
  transform: scale(0, 0);
  -webkit-transition: -webkit-transform 0.1s cubic-bezier(0.8, -0.33, 0.2, 1.33);
  -moz-transition: -moz-transform 0.1s cubic-bezier(0.8, -0.33, 0.2, 1.33);
  -o-transition: -o-transform 0.1s cubic-bezier(0.8, -0.33, 0.2, 1.33);
  transition: transform 0.1s cubic-bezier(0.8, -0.33, 0.2, 1.33);
}
.radio input[type="radio"] {
  opacity: 0;
  z-index: 1;
}
.radio input[type="radio"]:focus + label::before {
  outline: thin dotted;
  outline: 5px auto -webkit-focus-ring-color;
  outline-offset: -2px;
}
.radio input[type="radio"]:checked + label::after {
  -webkit-transform: scale(1, 1);
  -ms-transform: scale(1, 1);
  -o-transform: scale(1, 1);
  transform: scale(1, 1);
}
.radio input[type="radio"]:disabled + label {
  opacity: 0.65;
}
.radio input[type="radio"]:disabled + label::before {
  cursor: not-allowed;
}
.radio.radio-inline {
  margin-top: 0;
}

.radio-primary input[type="radio"] + label::after {
  background-color: #337ab7;
}
.radio-primary input[type="radio"]:checked + label::before {
  border-color: #337ab7;
}
.radio-primary input[type="radio"]:checked + label::after {
  background-color: #337ab7;
}

.radio-danger input[type="radio"] + label::after {
  background-color: #d9534f;
}
.radio-danger input[type="radio"]:checked + label::before {
  border-color: #d9534f;
}
.radio-danger input[type="radio"]:checked + label::after {
  background-color: #d9534f;
}

.radio-info input[type="radio"] + label::after {
  background-color: #5bc0de;
}
.radio-info input[type="radio"]:checked + label::before {
  border-color: #5bc0de;
}
.radio-info input[type="radio"]:checked + label::after {
  background-color: #5bc0de;
}

.radio-warning input[type="radio"] + label::after {
  background-color: #f0ad4e;
}
.radio-warning input[type="radio"]:checked + label::before {
  border-color: #f0ad4e;
}
.radio-warning input[type="radio"]:checked + label::after {
  background-color: #f0ad4e;
}

.radio-success input[type="radio"] + label::after {
  background-color: #5cb85c;
}
.radio-success input[type="radio"]:checked + label::before {
  border-color: #5cb85c;
}
.radio-success input[type="radio"]:checked + label::after {
  background-color: #5cb85c;
}

input[type="checkbox"].styled:checked + label:after,
input[type="radio"].styled:checked + label:after {
  font-family: 'FontAwesome';
  content: "\f00c";
}
input[type="checkbox"] .styled:checked + label::before,
input[type="radio"] .styled:checked + label::before {
  color: #fff;
}
input[type="checkbox"] .styled:checked + label::after,
input[type="radio"] .styled:checked + label::after {
  color: #fff;
}

    </style>
</head>


<body>

    <div id="wrapper">
                           
        <nav class="navbar-default navbar-static-side" role="navigation">
            <include file="Base:left_nav" />
        </nav>

        <div id="page-wrapper" class="gray-bg">
        <div class="row border-bottom">
            <nav class="navbar navbar-static-top" role="navigation" style="margin-bottom: 0;">
                <include file="Base:header" />
            </nav>

        </div>

        <div class="wrapper  animated fadeInRight">
            <br/>
            <div class="row">
                <div class="col-lg-12">
                    <div class="ibox-title">
                        <h5 style="margin-right:20px;">后台菜单列表</h5>
                        <h5><a href="{:U('Admin/Menu/add')}">添加菜单</a></h5>
                    </div>
                </div>
                <div class="col-lg-12">
                    <div class="ibox float-e-margins">
                        <div class="ibox-content">
                            <form method="post" class="form-horizontal" action="__SELF__">
                                <volist name="menu_nodes" id="menu">
                                    <div class="panel panel-default">
                                        <div class="panel-heading">


                                            <div class="checkbox checkbox-default checkbox-inline">
                                                <input class="auth_rules rules_all" type="checkbox" name="rules[]" value="<?php echo $main_rules[$menu['url']] ?>">
                                                <label>&nbsp;{$menu.name}</label>
                                            </div>
                                          

                                        </div>
                                        <present name="menu['child']">
                                            <volist name="menu['child']" id="child" >
                                                    <div class="panel-body">
                                                        <div class="checkbox checkbox-default checkbox-inline">
                                                            <input class="auth_rules rules_row" type="checkbox" name="rules[]" value="<?php echo $child_rules[$child['url']] ?>"/>
                                                            <label>&nbsp;{$child.name}</label>
                                                        </div>
                                                        <notempty name="child['_child']">
                                                           <div class="child_row">
                                                                <volist name="child['_child']" id="op">
                                                                    <div class="checkbox checkbox-default checkbox-inline">
                                                                         <input class="auth_rules" type="checkbox" name="rules[]"
                                                                           value="<?php echo $child_rules[$op['url']] ?>"/>
                                                                        <label>&nbsp;{$op.name}</label>
                                                                    </div>
                                                               </volist>
                                                           </div>
                                                       </notempty>
                                                    </div>
                                            </volist>
                                        </present>

                                    </div>
                                </volist>
                                <div class="form-group">
                                    <div class="col-sm-4 col-sm-offset-2">
                                        <button class="btn btn-primary" type="submit">保存</button>
                                        <button class="btn btn-white" type="submit">返回</button>
                                    </div>
                                </div>
                            </form>
                        </div>
                    </div>
                </div>
            </div>
        </div>
         <include file="Base:footer" />

        </div>
        </div>
    <include file="Base:footer_js" />
    <script type="text/javascript" src="__ADMIN_JS__/message.js"></script>
       <!-- iCheck -->
    <script src="__ADMIN_JS__/plugins/iCheck/icheck.min.js"></script>
    <script type="text/javascript">
        $(function(){
            var rules = <?php echo json_encode($group_rules) ?>;
            //var rules =['1','2','3','4','5'];
            $('.auth_rules').each(function(){
                if( $.inArray( parseInt(this.value),rules) > -1){
                    $(this).prop('checked',true);
                }
            });
        });
        $("form").submit(function(){
            var self = $(this);
            $.post(self.attr("action"), self.serialize(), success, "json");
            return false;

            function success(data){
                if(data.status){
                    var msg = new $.Messager(data.info, {type:'success' ,placement: 'center',time: 1000});
                    msg.show();
                    window.location.href = data.url;
                } else {
                    // var msg = new $.Messager(data.info, {placement: 'center',time: 1000});
                    // msg.show();
                    showMsg(data.info,data.url,'',2000);
                }
            }

            function showMsg(info , url , option ,time) {
                if(!option) {
                    option = {type: "default"};
                }
                var msg = new $.Messager(info, {type:option.type,placement: 'center',time: 1000});
                msg.show();
                setTimeout("location.href= '" + url + "';", 1000);  
            }
        });
    </script>
    <script type="text/javascript">
        $('.rules_all').on('change' , function() {
            var parent = $(this).parent().parent().parent();
            if($(this).attr('checked')) {
                $(parent).find("input[type='checkbox']").each(function(){
                    $(this).prop('checked',false);
                    $(this).attr('checked',false);
                })

                $(this).attr('checked',false);
            }else{
                $(parent).find("input[type='checkbox']").each(function(){
                    $(this).prop('checked',true);
                    $(this).attr('checked','checked');
                })

                $(this).attr('checked','checked');
            }
            

        })

        $('.rules_row').on('change' , function() {
            var parent = $(this).parent().parent();
            console.log($(this));
            if($(this).attr('checked') == 'checked') {
                $(parent).find("input[type='checkbox']").each(function(){
                    $(this).prop('checked',false);
                })
                $(this).attr('checked',false);
            }else{
                $(parent).find("input[type='checkbox']").each(function(){
                    $(this).prop('checked','checked');
                })
                $(this).attr('checked','checked');
            }
            

        })
    </script>
   
</body>

</html>
